<template>
    <div>
        <el-icon>
            <component :is="isFullscreen? 'el-icon-full-screen' : 'el-icon-full-screen'"></component>
        </el-icon>
    </div>
</template>

<script>
import ScreenFull from 'screenfull'

export default {
    name: 'ScreenFull',
    data() {
        return {
            isFullscreen: false
        }
    },
    mounted() {
        this.init()
    },
    beforeDestroy() {
        this.destroy()
    },
    methods: {
        click() {
            if (!ScreenFull.enabled) {
                this.$message({
                    message: 'you browser can not work',
                    type: 'warning'
                })
                return false
            }
            ScreenFull.toggle()
        },
        change() {
            this.isFullscreen = ScreenFull.isFullscreen
        },
        init() {
            if (ScreenFull.enabled) {
                ScreenFull.on('change', this.change)
            }
        },
        destroy() {
            if (ScreenFull.enabled) {
                ScreenFull.off('change', this.change)
            }
        }
    }
}
</script>

<style scoped>
.screenfull-svg {
    display: inline-block;
    cursor: pointer;
    fill: #5a5e66;;
    width: 20px;
    height: 20px;
    vertical-align: 10px;
}
</style>
